<script lang="ts" setup>
import { getData } from '@/api'
import { reactive, ref, nextTick } from 'vue'
import { useRoute , useRouter } from 'vue-router'
const path = Object.entries(useRoute().params)[0].join('=')
const data = ref({})
const router = useRouter()

getData(useRoute().params,'film.info').then(res=>{
  data.value= res.data.data.film
  console.log(data.value)
})

const back = () => {
  router.back()
}
</script>

<template>
  <span @click="back">&lt;</span>
  <div>
    剧照({{ data.photos?.length }})
  </div>
  <ul>
    <li  v-for="item in data.photos">
      <img :src="item">
    </li>
  </ul>
</template>

<style lang="scss" scoped>
span{
  position: fixed;
  display: block;
  font-size: 0.24rem;
  transform: scale(0.8, 1.4);
  z-index: 2;
  width: 0.375rem;
  height: 0.2142857143rem;
  line-height: 0.18rem;
  text-align: left;
  padding-left: 0.08rem;
  top: 0.12rem;
  color: #666;
}
div{
  height: .44rem;
  width: 100%;
  text-align: center;
  font: normal 600 .16rem/.44rem '';
  color: rgb(25, 26, 27);
}
ul{
  display: flex;
  flex-wrap: wrap;
  li{
    margin-bottom: .02rem;
  }
  img{
    width: 1.23rem;
    height: 1.23rem;
  }
}
</style>
